<script setup lang="ts">
import Question from '@/components/Question.vue'
import {
  userGetAnswerService,
  userGetCorrectAnswerService,
  userGetQuestionListService,
  userGetScoreService
} from '@/api/user'
import { useRoute } from 'vue-router'
import { ref } from 'vue'

const questions = ref([
  {
    id: 1,
    title: '题目1',
    options: ['A', 'B', 'C', 'D'],
    type: 1
  }
])
const score = ref(100)

const route = useRoute()
const testId = ref(route.params.id)

const correctAnswers = ref([])
const answers = ref<Record<number, String>>({})

const getQuestionList = async () => {
  try {
    let res = await userGetQuestionListService(testId.value)
    questions.value = res.data.data
    res = await userGetAnswerService(testId.value)
    answers.value = res.data.data || {}
  } catch (error) {
    console.error('获取题目或答案失败:', error)
  }
}

const getCorrectAnswer = async () => {
  try {
    const res = await userGetCorrectAnswerService(testId.value)
    correctAnswers.value = res.data.data
  } catch (error) {
    console.error('获取正确答案失败:', error)
    // ElMessage.error('获取答案失败，请稍后重试')
  }
}

getCorrectAnswer()
getQuestionList()

const getCorrectAnswerForQuestion = (questionId: number) => {
  const correctAnswerObj = correctAnswers.value.find((item: any) => item.questionsId === questionId)
  return correctAnswerObj ? correctAnswerObj.correctOption : null
}

const getExplanationForQuestion = (questionId: number) => {
  const correctAnswerObj = correctAnswers.value.find((item: any) => item.questionsId === questionId)
  return correctAnswerObj ? correctAnswerObj.explanation : null
}

const isCorrect = (questionId: number) => {
  const userAnswer = answers.value[questionId]
  const correctAnswer = getCorrectAnswerForQuestion(questionId)
  return userAnswer === correctAnswer
}

const getScore = async () => {
  const res = await userGetScoreService(testId.value)
  console.log(res.data.data)
  score.value = res.data.data
}

getScore()
</script>

<template>
  <div id="main-stuTestResultPage">
    <h1>作答情况</h1>
    <h2 style="margin-top: 20px">本次测试得分：{{ score ? score : 0 }}分</h2>
    <div style="width: 100%">
      <el-scrollbar height="80vh" style="background: white; border-radius: 10px; margin-top: 10px">
        <div v-for="(question, index) in questions" :key="question.id">
          <Question>
            <template #title>
              <el-tag type="primary"> 单选</el-tag>
              {{ index + 1 }}.{{ question.title }}
            </template>
            <template #option>
              <el-radio-group v-model="answers[question.id]" disabled>
                <ul>
                  <li v-for="(option, key) in question.options" :key="key">
                    <el-radio
                      :label="key"
                      :class="{
                        'correct-answer': getCorrectAnswerForQuestion(question.id) === key,
                        'user-wrong-answer':
                          answers[question.id] === key &&
                          getCorrectAnswerForQuestion(question.id) !== key
                      }"
                    >
                      {{ key }}. {{ option }}
                    </el-radio>
                  </li>
                </ul>
              </el-radio-group>
            </template>
          </Question>
          <div
            class="result"
            :style="{ backgroundColor: isCorrect(question.id) ? '#e6f4ea' : '#fcebe9' }"
          >
            <div>
              <h3 :style="{ color: isCorrect(question.id) ? '#388e3c' : '#d32f2f' }">
                {{ isCorrect(question.id) ? '正确' : '错误' }}
              </h3>
              <p>正确答案：{{ getCorrectAnswerForQuestion(question.id) }}</p>
              <p>解析：</p>
              <p style="white-space: pre-wrap">{{ getExplanationForQuestion(question.id) }}</p>
            </div>
            <div class="score"></div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<style scoped>
#main-stuTestResultPage {
  padding: 20px;
}

.el-radio-group,
.el-checkbox-group {
  display: block;
  margin-top: 10px;
}

li {
  list-style-type: none;
  margin-bottom: 10px;
}

.result {
  display: flex;
  width: 95%;
  border-radius: 10px;
  margin: 20px;
  padding: 10px;
  line-height: 2rem;
  justify-content: space-between;
  align-items: center;
}

.correct-answer {
  color: #388e3c !important; /* 绿色 */
}

.user-wrong-answer {
  color: #d32f2f !important; /* 红色 */
}
</style>
